<template>
  <div class="product-complaint-chart" style="position: relative;">
     <img src="../assets/img/bingbgc.png" alt="" class="rotunditybox">
            <span class="chart-title">{{ currentTitle }}</span>
            <span class="chart-number">{{ currentNumber }}</span>
    <div :id="chartId" style="width: 80%; height: 210px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ProductComplaintChart',
  props: {
    chartId: {
      type: String,
      default: 'productComplaintChart'
    }
  },
  data() {
    return {
      chart: null,
      currentTitle: '产品投诉',
      defaultTitle: '产品投诉',
      currentNumber: 0,
      totalNumber: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      // 添加DOM元素存在性检查
      const chartDom = document.getElementById(this.chartId)
      if (!chartDom) {
        console.warn(`图表容器不存在: ${this.chartId}`)
        return
      }
      
      try {
        this.chart = echarts.init(chartDom)
        
        // 添加鼠标事件监听
        this.chart.on('mouseover', (params) => {
          if (params.componentType === 'series' && params.seriesType === 'pie') {
            this.currentTitle = params.name // 显示模块名称
            this.currentNumber = params.value // 显示模块数字
          }
        })
        
        // 鼠标离开时恢复默认标题和总和
        this.chart.on('mouseout', () => {
          this.currentTitle = this.defaultTitle
          this.currentNumber = this.totalNumber // 显示总和
        })
        
        // 默认空配置
        const option = {
          title: {
            text: '',
            left: 'center',
            textStyle: { fontSize: 12, color: '#fff' }
          },
          tooltip: { trigger: 'item' },
          legend: {
            orient: 'vertical', // 设置为纵向排列
            right: '10%', // 调整位置到右侧
            top: 'middle', // 垂直居中
            textStyle: { fontSize: 10, color: '#fff' },
            icon: 'circle' // 将图例图标设置为圆形
          },
          series: [
            {
              name: '投诉类型',
              type: 'pie',
              radius: ['60%', '45%'],
              center: ['45%', '50%'], 
              avoidLabelOverlap: false,
              itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false // 禁用ECharts默认的emphasis标签，使用我们自定义的标题
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                scale: true, // 鼠标悬停时向外扩展
                scaleSize: 10 // 扩展的大小
              },
              labelLine: {
                show: false
              },
              data: [],
              color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
            }
          ]
        }
        
        this.chart.setOption(option)
      } catch (error) {
        console.error('图表初始化失败:', error)
      }
    },
    updateChart(data) {
      if (!this.chart || !data) return
      
      // 转换数据格式
      const pieData = Object.entries(data).map(([name, value]) => ({
        name,
        value: parseInt(value)
      }))
      
      // 计算总和
      this.totalNumber = pieData.reduce((sum, item) => sum + item.value, 0)
      this.currentNumber = this.totalNumber // 初始显示总和
      
      this.chart.setOption({
        series: [{ data: pieData }]
      })
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>
<style scoped>
.rotunditybox{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 30.8%;
  left: 28.8%;
}
.chart-title{
  position: absolute;
   top: 40%;
  left: 31.5%;
  font-size: 12px;
  color: #fff;
}
.chart-number{
    position: absolute;
    top: 46.2%;
    left: 34.5%;
    transform: translateX(-34%);
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    min-width: 30px;
}

</style>